<template>
	<view>
		<view class="grace-idcard-main">
			
			<view class="is-input is-size-15 has-pdtb-6">
				<text>{{type_name}}昵称</text>
				<input type="text" @input="onInput_user" placeholder="请输入昵称" />
			</view>
			<view class="is-input is-size-15 has-pdtb-6">
				<text>{{type_name}}账号</text>
				<input type="text" @input="onInput_userno" placeholder="请输入账号" />
			</view>
			<view class="grace-idcard-text">
				选择{{type_name}}收款码
			</view>
			<view class="grace-idcard-items">
				<view class="grace-idcard-uper-btn" @tap="selectImg1">
					<view class="img">
						<image src="../../static/imgs/camera.png" mode="widthFix" />
					</view>
					<view class="text">拍摄或选择照片</view>
				</view>
				<view class="grace-idcard-preview">
					<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel" ></image-cropper>
					<image :src="idCard1"  @tap="previewImg1" mode="widthFix"></image>
					<!--  #ifdef MP-ALIPAY -->   
					 <canvas id="myCanvas" canvas-id="myCanvas"   class="meslist_canvas" crop-width="200" crop-height="200"></canvas>
					 <!--  #endif--> 
				</view>
			</view>
			
			<view style="margin-top:38upx;">
				<button type="primary" @tap="uploadCards">上传</button>
			</view>
			<view class="grace-idcard-desc">
				请如实提交{{type_name}}收款码，乱传者封锁帐户
				<text class="is-block is-red-color">真实信息上传后无法修改</text>
			</view>
		</view>
		
	</view>
</template>
<script>
import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
var _self;
export default {
	data() {
		return {
			tempFilePath: '',
			cropFilePath: '',
			foxtoken:'',
			foxtel:'',
			idCard1 : '../../static/imgs/codepic.png',
			userinfo:[],
			user_card_rz:0,
			type_name:'',
			ma_user:'',
			ma_userno:'',
			payway:''
		};
	},
	components: {ImageCropper},
	onLoad:function(options) {
		this.ma_type = options.type;
		if(this.ma_type == 0){
			this.type_name = "微信";
			this.payway = "mawx.ma";
		}else if(this.ma_type == 1){
			this.type_name = "支付宝";
			this.payway = "mazfb.ma";
		}else if(this.ma_type == 2){
			this.type_name = "QQ钱包";
			this.payway = "maqq.ma";
		}else if(this.ma_type == 3){
			this.type_name = "银联云闪付";
			this.payway = "mabank.ma";
		}
		_self = this;
		let info = this.service.getfox();
		if(info[0]){
			this.foxtoken = info[0]['foxtoken'];
			this.foxtel= info[0]['foxtel'];
			uni.request({
				url: this.service.FOX_URL + 'diamond/get_userinfo',
				method:'POST',
				data: {
					user_key: this.foxtoken
				},
				dataType:'json',
				header:{
					'content-type':'application/x-www-form-urlencoded',
				},
				success: res => {
					// var rest = JSON.stringify(res);
					// console.log(rest)
					var rest = res.data;
					if(rest.status == 'success'){
						this.userinfo = rest.msg;
						this.user_card_rz = this.userinfo['user_card_rz'];
						// console.log(this.userinfo)
					}else{
						uni.showToast({
							title:rest.msg,
							icon:'none',
							mask:true
						})
					}
				}
			})
		}else{
			uni.reLaunch({
				url:'../logon/login'
			})
		}
	},
	methods: {
		onInput_user(e) {
			this.ma_user = e.detail.value;
		},
		onInput_userno(e) {
			this.ma_userno = e.detail.value;
		},
		selectImg1 : function() {
			uni.chooseImage({
				count:1,
				success:function(res){
					_self.idCard1 = res.tempFilePaths[0];
					_self.tempFilePath = res.tempFilePaths[0];
				}
			})
		},
		previewImg1 : function(){
			uni.previewImage({
				urls:[_self.idCard1]
			});
		},
		confirm(e) {
			this.tempFilePath = ''
			this.idCard1 = e.detail.tempFilePath
		},
		cancel() {
			console.log('canceled')
		},
		uploadCards : function(){
			if(this.idCard1 == '../../static/imgs/codepic.png'){
				uni.showToast({title:"请选择您的收款码", icon:"none"});
				return;
			}
			if(this.ma_user.length <= 0){
				uni.showToast({title:'收款码商家名错误',icon:'none'})
				return;
			}
			// 因底层限制一次上传一个
			uni.showLoading({title:"上传中"});
			// 上传正面
			var uploadTask1 = uni.uploadFile({
				url: this.service.FOX_URL+'diamond/upload_pic',
				filePath: _self.idCard1,
				fileType: 'image',
				formData: {
					'user_key': this.foxtoken,
					'user_tel': this.foxtel,
					'path' : 'ma',
					'type' : this.payway,
					'model' : '',
					'ma_user' : this.ma_user,
					'ma_userno' : this.ma_userno,
					'ma_type' : this.ma_type
				},
				name: 'file',
				success: function (uploadFileRes) {
					var pages = getCurrentPages();
					var currPage = pages[pages.length - 1]; //当前页面
					var prevPage = pages[pages.length - 2]; //上一个页面
					//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
					prevPage.setData({
						isDoRefresh:true
					})
					uni.hideLoading();
					uni.showToast({
						title:'上传提交成功',
						icon:'none',
						mask:true
					})
					setTimeout(function() {
						uni.navigateBack();
					}, 1500)
				}
			 });
		}
	},
}
</script>
<style>
view{font-size:28upx;}
.grace-idcard-main{margin:10upx 30upx 20upx;}
.grace-idcard-desc{line-height:2em; background:#FFFFFF; padding:20upx; border-radius:10upx;}
.grace-idcard-text{line-height:2em; margin-top:30upx;}
.grace-idcard-items{background:#FFFFFF; padding:30upx 0; display:flex; margin:30upx 0; border-radius:10upx; align-items: flex-start;}
.grace-idcard-uper-btn{width:200upx; margin:0 60upx; background:#F1F1F1; padding-bottom:10upx; border-radius:10upx; text-align:center;}
.grace-idcard-uper-btn .img{width:100upx; height:100upx; margin:0 auto; margin-top:30upx;}
.grace-idcard-uper-btn .img image{width:100upx; height:100upx;}
.grace-idcard-uper-btn .text{width:100%; margin-top:10upx; text-align:center; line-height:2em;}
.grace-idcard-preview{width:60%; margin:0 30upx;}
.grace-idcard-preview image{width:100%;}
.cardbox{width:100%;padding:0 30upx;}
.cardbox image{width:100%;}
.is-input{
	background: #FFFFFF;
	height: 88rpx;
	line-height: 88rpx;
	margin-bottom: 20rpx;
	border-top: 32upx solid #F9F9F9;
}
.is-input text{		
	float: left;
	margin-right: 10rpx;
	color: #222;
}
.is-input input{
	display: inline-block;
	height: 88rpx;
	line-height: 88rpx;
}
</style>